<template>
  <!-- 移动端遮罩层 -->
  <div class="mobile-menu" @click.self="closeNav($event)">
    <div class="mobile-menu-wrapper">
      <div class="close-menu">
        <span class="close-btn">
          <i class="iconfont icon-Rightarrow"></i>
        </span>
      </div>
      <div class="avatar">
        <div class="circle">
          <router-link to="/">
            <q-avatar square>
              <img class="avatar-img" :src="avatar" /> </q-avatar
          ></router-link>
        </div>
        <p>吕镇</p>
        <p class="social-link">
          <a
            style="color:#cecece;"
            target="_blank"
            href="https://github.com/q350241636"
            ><q-icon
              name="mdi-github"
              style="margin-top:-2px;margin-right:2px;"
            />Github</a
          >
          <a style="color:#cecece;" href="mailto:350241636@qq.com"
            ><q-icon
              name="mail"
              style="margin-top:-2px;margin-right:2px;"
            />E-mail</a
          >
        </p>
        <div class="sns-links"></div>
      </div>

      <div class="widget">
        <div class="widget-title"><i class="iconfont icon-pages"></i> 页面</div>
        <ul class="pages-ul">
          <li><router-link to="/">首页</router-link></li>
          <li><router-link to="/archive">归档</router-link></li>
          <li><router-link to="/about">关于</router-link></li>
        </ul>
      </div>
      <div class="widget">
        <div class="widget-title">
          <i class="iconfont icon-category"></i> 分类
        </div>
        <ul class="category-ul">
          <li><router-link to="/category/代码">代码</router-link></li>
          <li><router-link to="/category/日常">日常</router-link></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Emit } from 'vue-property-decorator';
import { mixins } from 'vue-class-component';

@Component({})
export default class FullScreenLoading extends Vue {
  //关闭移动端菜单

  @Emit('closeNav')
  public closeNav(e: MouseEvent): void {
    // this.$emit('closeNav');
  }
  private avatar: string =
    'https://oss-cdn.yevpt.com/avatar/user/6b7fad9bcd64455b859b34080031a7e4.jpg?a=e6dc81c95ec10917df70a5f7cbbb27a6&b=605a12fb';
}
</script>
<style lang="scss" scoped>
.mobile-menu {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
  transform: scale(1.35);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s,
    opacity 0.25s ease-in-out 0s, visibility 0.3s ease-in-out 0s;
  .card-box {
    display: none !important;
    display: flex;
    max-height: 300px;
    z-index: 1002;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    flex-wrap: wrap;
    .card {
      display: flex;
      flex-basis: 30%;
      margin-right: 10px;
      margin-bottom: 10px;

      transition: transform 0.3s ease-in-out 0s, background 0.3s ease-in-out 0s;
      border: 1px solid rgba(220, 220, 220, 0.1);
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 10px;
      background: radial-gradient(black, transparent);
      border-radius: 5px;
      &:hover {
        opacity: 0.5;
      }
      &:nth-child(3n) {
        margin-right: 0;
      }
      router-link {
        text-align: center;
      }
      svg {
        fill: white;
        stroke: white;
        width: 24px;
        height: 24px;
      }
      .down {
        text-align: center;
        color: white;
      }
    }
  }
  .mobile-menu-wrapper {
    position: fixed;
    background: #333;
    color: #ccc;
    overflow: hidden;
    height: 100%;
    top: 0;
    bottom: 0;
    padding: 0 10px;
    width: 260px;
    left: -260px;
    overflow-y: auto;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    z-index: 99;
    transition: all 0.3s;
    .close-menu {
      height: 40px;
      .close-btn {
        float: right;
        i {
          top: 11px;
          color: #fff;
          font-size: 1.25rem;
          cursor: pointer;
        }
      }
    }
    .avatar {
      text-align: center;
      .circle {
        width: 100px;
        height: 100px;
        overflow: hidden;
        // border-radius: 100%;
        border: 3px solid #fff;
        box-shadow: 0 1px 4px rgba(100, 110, 120, 0.53);
        margin: 15px auto;
        .q-avatar {
          width: 100px;
          height: 100px;
        }
      }
      p {
        font-size: 12px;
      }
      .sns-links {
        margin-top: 10px;
        a {
          color: #fff;
          font-size: 1.25rem;
          margin: 0 3px;
        }
      }
    }
    .social-link {
      a {
        padding: 5px 0px;
        margin-right: 10px;
        border-bottom: 1px solid #555;
      }
    }
    .search {
      margin: 15px;
      color: #ddd;
      border: 0;
      background: 0 0;
      display: block;
      padding: 0;

      transition: all 0.5s;
    }
    .widget {
      text-align: center;
      margin-bottom: 20px;
      .widget-title {
        color: #cecece;
        margin: 0 15px;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 0.8125rem;
      }
      .pages-ul,
      .category-ul {
        li {
          display: inline-block;
          margin: 0 1px;
          padding: 5px;
          a {
            color: #cecece;
            &.router-link-exact-active {
              color: lightgreen !important;
            }
            &::before {
              content: ' ';
              display: inline-block;
              vertical-align: middle;
              margin-right: 3px;
              width: 4px;
              height: 4px;
              border-radius: 50%;
              background: #a7eebb;
            }
          }
        }
      }
    }
  }
}
.nav-on {
  .mobile-menu {
    z-index: 998;
    cursor: pointer;
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.3s ease-in-out 0s, opacity 0.3s ease-in-out 0s,
      visibility 0.3s ease-in-out 0s;
    backdrop-filter: blur(3px);
    .mobile-menu-wrapper {
      left: 0;
    }
  }
}
</style>
